<template>
	<view class="login_box">
		<view class="login_logo">
			<image class="login_img" src="../../static/app.png" mode=""></image>
		</view>
		<view class="input_box">
			<input type="text" v-if="referrer != '请输入推荐人'" disabled :placeholder="referrer" placeholder-style="color:#bebfc3">
			<input type="number" placeholder="请输入手机号" placeholder-style="color:#bebfc3" v-model="phone">
			<view class="yzm_box">
				<input type="safe-password" placeholder="请输入手机验证码" placeholder-style="color:#bebfc3" v-model="code">
				<text @click="getCode()">{{codetext}}</text>
			</view>
			<input type="text" placeholder="请设置您的登录密码" placeholder-style="color:#bebfc3" v-model="Login_pwd">
		</view>
		<view class="label">
			<checkbox-group @change="radioChange">
				<checkbox value="checked" :checked="checked" style="transform:scale(0.7)" />签订合同 <text
					@click="show = true">《平台合作协议》</text>
			</checkbox-group>
		</view>
		<view class="Modal" v-show="show" :class="show? 'visible' :''">
			<view class="Modal_tit">
				<h3>合作协议</h3>
				<p v-html="regis.register"></p>
			</view>
			<view class="Modal_cf" @click="contract">同意</view>
		</view>
		<view class="login_button" v-if="checked" @click="verify">
			注册
		</view>
		<view class="login_button" style="background-color: #d1d1d1;" v-else>
			注册
		</view>
		<u-overlay :show="qrcodeShow">
			<view class="tc">
				<view class="tc-main">
					<view class="top">
						<view class="lefts">
							<image class="login_img" src="/static/kl_logo.jpg"></image>
						</view>
						<view class="rights">
							<view class="titles">
								卡拉云服务
							</view>
							<view class="msg">
								用户云服务
							</view>
						</view>
					</view>
					<view class="content">
						<image class="login_img" src="/static/wx_qrcode.jpg"></image>
					</view>
					<view class="bottom">
						长按3秒识别二维码
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import screen from '@/component/screen.vue'
	export default {
		data() {
			return {
				show: false,
				qrcodeShow: false,
				send_show: false,
				referrer: '请输入推荐人', //推荐人
				phone: '', //手机号
				code: '', //验证码
				Login_pwd: '', //密码
				codetext: '获取验证码',
				isDisabled: true,
				show: false,
				checked: false, //合同是否选中
				e: {},
				regis: {},
				version: '5.0'
			}
		},
		components: {
			screen
		},
		onLoad(e) {
			this.e = e
			// this.referrer_f5()
			// this._getAgree5()
		},
		onShow() {
			let that = this
			uni.$on('show', function(data) {
				that.checked = data
			})
		},
		methods: {
			radioChange(e) {
				if (e.detail.value != null && e.detail.value.length > 0) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			// 查找推荐人 5.0
			async referrer_f5() {
				// 发送请求
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getReferrer',
					data: {
						type: this.e.type,
						id: this.e.id
					}
				});
				this.referrer = res.data.data.name
			},
			//获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				let that = this;
				// 防止多次重复点击
				if (!that.isDisabled) {
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.codetext = "发送中..." //发送验证码
				this.isDisabled = false;
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					});
					this.setTimer();
				}, 1000)
			},
			// 验证码的定时器
			setTimer() {
				// 发送请求
				this.V_Code5()
			},
			// 获取验证码请求
			async V_Code5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/sendSms',
					data: {
						mobile: this.phone
					}
				});
				clearInterval(this.getCode());
				let holdTime = 60; //定义变量并赋值
				this.codetext = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.isDisabled = true;
						this.getCodeBtnColor = "#ffffff";
						this.codetext = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.codetext = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			//代理产品
			close() {
				this.show = false
				this.send_show = false
			},
			// 代理产品子组件传给父组件的值
			send(id, name) {
				this.agenttext = name
				this.agenttext_id = id
				this.send_show = false
			},
			//注册
			verify() {
				if (this.phone != '') {
					this.namex = this.phone
					if (this.code == '') {
						uni.showToast({
							title: '请填写验证码',
							duration: 2000,
							icon: "none"
						});
						return false
					}
					if (this.Login_pwd == '') {
						uni.showToast({
							title: '请填写登录密码',
							duration: 2000,
							icon: "none"
						});
						return false
					}
					this.register5()
				} else {
					uni.showToast({
						title: '个人信息不全',
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 注册
			async register5() {
				var that = this
				const {
					data: res
				} = await this.$myHttp5({
					url: 'user/register',
					data: {
						password: this.Login_pwd, //登陆密码
						mobile: this.phone, //手机号
						code: this.code, //验证码
						type: this.e.type, //类型：1=机构，2=代理（扫码获得）
						id: this.e.id, //机构或代理ID（扫码获得）
						company_id: this.e.company_id,
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					uni.setStorageSync('userinfo', res.data.userinfo);
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none",
					});
					setTimeout(function() {
						that.qrcodeShow = true
					}, 1500)
					// setTimeout(() => {
					// 	uni.navigateTo({
					// 		url: '/pages/login/login'
					// 	})
					// }, 2000)
				}
			},
			// 合同
			contract() {
				this.checked = true
				this.show = false
			},
			async _getAgree5() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getAgree',
					header: {
						'token': userinfo.token
					}
				});
				this.regis = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		min-height: 100vh;
		padding: 70rpx;
		box-sizing: border-box;
		background-image: linear-gradient(#fff, #e7f6f4);

		.login_logo {
			text-align: center;

			.login_img {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				border-radius: 18rpx;
			}
		}

		.input_box {
			background-color: #fff;
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				width: 90%;
				padding: 15rpx;
				height: 100rpx;
				box-sizing: border-box;
			}

			input:not(:last-child) {
				border-bottom: #dddddf solid 1px;
			}

			.yzm_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 90%;
				border-bottom: #dddddf solid 1px;

				input {
					width: 70%;
					border-bottom: none;
				}

				text {
					color: #abeaeb;
					font-size: 24rpx;
					display: block;
					margin-right: 15rpx;
				}
			}
		}

		.login_button {
			background-color: #abeaeb;
			width: 100%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			margin-top: 45rpx;
			transition: all 0.5s;
		}

		.login_button:active {
			background-color: #9cd3d4;
		}

		.label {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #818181;

			text {
				color: #9cd3d4;
				font-size: 30rpx;
			}
		}

		.Modal {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(255, 255, 255, 0);

			.Modal_tit {
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 5%;
				right: 5%;
				overflow: hidden;
				overflow-y: auto;
				background-color: rgba(255, 255, 255, 1);
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				display: block;
				padding: 35rpx 20rpx;
				padding-bottom: 0;

				h3 {
					text-align: center;
					margin-bottom: 30rpx;
				}
			}

			.Modal_cf {
				height: 80rpx;
				background-color: #fff;
				left: 5%;
				right: 5%;
				position: absolute;
				bottom: calc(20% - 80rpx);
				border-bottom-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: #dddddf 1px solid;
			}
		}

		.tc {
			width: 80%;
			margin: 0 auto;
			margin-top: 20%;

			.tc-main {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;

				.top {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.lefts {
						width: 30%;
						text-align: center;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}

					.rights {
						width: 70%;
						padding: 0 20rpx;

						.titles {
							padding-top: 20rpx;
							font-size: 30rpx;
							font-weight: bold;
						}

						.msg {
							padding-top: 10rpx;
							font-size: 26rpx;
							color: #909399;
						}
					}
				}

				.content {
					padding: 30rpx 0;
					text-align: center;

					image {
						width: 500rpx;
						height: 500rpx;
					}
				}
				
				.bottom {
					text-align: center;
					color: #818181;
					padding-bottom: 30rpx;
				}
			}
		}
	}
</style>